<template>
  <div class="payouts-page">
    <div class="payouts-card">
      <n-tabs default-value="我要提现" type="line">
        <n-tab-pane name="我要提现" tab="我要提现"></n-tab-pane>
      </n-tabs>
      <div class="con">
        <div class="prices">
          <span>100</span>
          <span>元</span>
        </div>
        <div class="desc">目前金额</div>
        <n-form
          ref="ruleForm"
          class="form"
          :model="queryForm"
          :rules="rules"
          label-placement="left"
        >
          <n-form-item
            require-mark-placement="left"
            label="提现金额"
            path="balance"
          >
            <n-input-number
              class="number-input"
              :min="100"
              :step="100"
              v-model:value="queryForm.balance"
              placeholder="提现金额必须是100的倍数"
              clearable
            />
          </n-form-item>
        </n-form>
        <n-button
          style="--n-border: 1px solid #040404"
          class="submit-btn submit-btn-empty"
          type="primary"
          @click="handSubmit"
        >
          提交申请
        </n-button>
      </div>
    </div>
    <div class="payouts-illustrate">
      <div class="item">1、提现需要满足100元且是100元的倍数。</div>
      <div class="item">
        2、填写支付宝绑定的真实姓名(与身份证一致)，才能收到提现款。若由于用户本人资料填写有误照成的提现失败或提现出现问题，皆由用户本人负责，本站概不负责。请用户
        一定要认真填写资料，并仔细核对!!!
      </div>
      <div class="item">
        3、提现申请只能在当月1日-5日，提现申请通过审核后，会在当月25日进行打款(节假日期间，打款日期顺延)，请耐心等候，如有申请提现相关问题，请联系我们
      </div>
    </div>
    <confirm-dia
      ref="confirmRef"
      title="确定要申请提现吗？"
      @confirm="handConfirm"
    />
  </div>
</template>
<script setup lang="ts" name="UseriPayouts">
import {
  NTabPane,
  NTabs,
  NForm,
  NFormItem,
  NInputNumber,
  NButton,
  useMessage
} from 'naive-ui'
import type { FormRules, FormInst } from 'naive-ui'
import { defineAsyncComponent, ref } from 'vue'
const ConfirmDia = defineAsyncComponent(
  () => import('@/components/ConfirmDia.vue')
)
const queryForm = ref({
  balance: null
})
const ruleForm = ref<FormInst | null>(null)

const handSubmit = (e: MouseEvent) => {
  e.preventDefault()
  ruleForm.value?.validate((errors: any) => {
    if (!errors) {
      save()
    }
  })
}
const confirmRef = ref()
const save = () => {
  confirmRef.value.open()
}
const toast = useMessage()
const handConfirm = async () => {
  toast.success('已提交提现申请')
  queryForm.value.balance = null
}
const rules: FormRules = {
  balance: [
    {
      type: 'number',
      required: true,
      message: '请输入提现金额',
      trigger: 'blur'
    },
    {
      pattern: /^[1-9]\d*$/,
      message: '提现金额必须是100的倍数',
      trigger: 'blur'
    }
  ]
}
</script>

<style scoped lang="scss">
.payouts-page {
  .payouts-card {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #eeeeee;
    box-sizing: border-box;
    padding: 15px 24px;
    .con {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding-top: 53px;
      padding-bottom: 88px;
      .prices {
        span {
          font-size: 32px;
          font-family: HONOR Sans, HONOR Sans;
          font-weight: 600;
          color: #f1423d;
          &:last-child {
            font-size: 14px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            color: #333333;
          }
        }
      }
      .desc {
        margin-top: 8px;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #999999;
      }
      .form {
        margin-top: 40px;
        .number-input {
          width: 300px;
          margin-left: 12px;
        }
      }
      .submit-btn {
        margin-top: 30px;
        width: 224px;
        height: 46px;
        font-size: 16px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
      }
      .submit-btn-empty {
        background: #040404;
        border-color: #0c0101;
      }
    }
  }
  .payouts-illustrate {
    margin-top: 15px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #eeeeee;
    box-sizing: border-box;
    padding: 15px 24px;
    min-height: 600px;
    .item {
      font-size: 14px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #666666;
      padding: 24px 0;
      border-bottom: 1px solid #eeeeee;
      cursor: pointer;
      &:last-child {
        border-bottom: none;
      }
    }
  }
}
</style>
<style lang="scss">
.payouts-page {
  .number-input {
    .n-button {
      padding: 0 5px !important;
    }
  }
}
</style>
